<template>
  <div class="container">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="24">
          <div class="title"><h5>项目解读</h5></div>
          <el-form-item label="文件名称" prop="explanation">
            <el-input
              class="input-item"
              v-model="form.explanation"
              placeholder="请输入"
              :disabled="form.policyList.length || form.toolboxList.length"
            ></el-input>
            <fileupload
              class="fileupload"
              :modelValue="form.explanationList"
              @update:modelValue="handlExplanationupload"
              :flag="form.policyList.length || form.toolboxList.length"
            ></fileupload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="title"><h5>行业政策</h5></div>
          <el-form-item label="文件名称" prop="policy">
            <el-input
              class="input-item"
              v-model="form.policy"
              placeholder="请输入"
              :disabled="form.explanationList.length || form.toolboxList.length"
            ></el-input>
            <fileupload
              class="fileupload"
              :modelValue="form.policyList"
              @update:modelValue="handlPolicyListUpload"
              :flag="form.explanationList.length || form.toolboxList.length"
            ></fileupload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="title"><h5>工具箱</h5></div>
          <el-form-item label="文件名称" prop="toolbox">
            <el-input
              class="input-item"
              v-model="form.toolbox"
              placeholder="请输入"
              :disabled="form.explanationList.length || form.policyList.length"
            ></el-input>
            <fileupload
              class="fileupload"
              :modelValue="form.toolboxList"
              @update:modelValue="handlToolboxUpload"
              :flag="form.explanationList.length || form.policyList.length"
            ></fileupload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item class="form-btn">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import fileupload from "@/components/FileUpload";
import {
  UploadExplanationApi,
  UploadPolicyApi,
  UploadToolboxApi,
} from "@/api/knowledgeBase/index";
import { ElMessage } from "element-plus";
const router = useRouter();
let num = null;
let txt;
let files;
const form = reactive({
  explanation: "", //项目解读
  policy: "", // 行业政策
  toolbox: "", // 工具箱
  explanationList: [], // 项目解读文件
  policyList: [], // 行业政策文件
  toolboxList: [], // 工具箱文件
});
// 上传项目解读
const handlExplanationupload = (val, result, operationType) => {
  if (operationType === "success") {
    if (result) {
      form.explanationList = [];
      result.forEach((item)=>{
        form.explanationList.push(item);
      });
    }
  } else if (operationType === "delete") {
    form.explanationList.splice(result, 1);
  }
};
// 上传行业政策
const handlPolicyListUpload = (val, result, operationType) => {
  if (operationType === "success") {
    if (result) {
      form.policyList = [];
      result.forEach((item)=>{
        form.policyList.push(item);
      });
    }
  } else if (operationType === "delete") {
    form.policyList.splice(result, 1);
  }
};
// 上传工具箱文件
const handlToolboxUpload = (val, result, operationType) => {
  if (operationType === "success") {
    if (result) {
      form.toolboxList = [];
      result.forEach((item)=>{
        form.toolboxList.push(item);
      });
    }
  } else if (operationType === "delete") {
    form.toolboxList.splice(result, 1);
  }
};
const submitForm = async () => {
  if (
    form.explanationList.length === 0 &&
    form.policyList.length === 0 &&
    form.toolboxList.length === 0
  ) {
    ElMessage.error("请选择要上传的类型");
    return;
  }
  if (form.explanationList.length) {
    num = "0";
    txt = form.explanation;
    files = form.explanationList;
    const data = {
      type: num,
      title: txt,
      file: files,
    };
    const res = await UploadExplanationApi(data);
    console.log(res);
    if (res.code === 200) {
      ElMessage.success("上传成功");
      form.explanationList = ""
      form.explanation = []
    }
  }
  if (form.policyList.length) {
    num = "1";
    txt = form.policy;
    files = form.policyList;
    const data = {
      type: num,
      title: txt,
      file: files,
    };
    const res = await UploadPolicyApi(data);
    console.log(res);
    if (res.code === 200) {
      ElMessage.success("上传成功");
      form.policy = ""
      form.policyList = []
    }
  }
  if (form.toolboxList.length) {
    num = "2";
    txt = form.toolbox;
    files = form.toolboxList;
    const data = {
      type: num,
      title: txt,
      file: files,
    };
    const res = await UploadToolboxApi(data);
    console.log(res);
    if (res.code === 200) {
      ElMessage.success("上传成功");
      form.toolbox = ""
      form.toolboxList = []
    }
  }
};
// 取消
const resetForm = () => {
  router.go(-1);
};
// watchEffect(() => {
//   if (form.explanationList.length) {
//   }
//   if (form.policyList.length) {
//   }
//   if (form.toolboxList.length) {
//   }
// });
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  .form-single-info {
    padding: 0 40px;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .el-row {
    width: 100%;
  }
  .el-col {
    display: flex;
    align-items: first baseline;
    justify-content: space-between;
    h5 {
      font-size: 20px;
      font-weight: bold;
      width: 100px;
    }
    .fileupload {
      margin-top: 20px;
    }
  }
  .form-btn {
    position: absolute;
    bottom: 0;
    right: 50px;
  }
}
</style>
